<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="pamars">
      <el-form-item label="作品标题">
        <el-input v-model="pamars.title" placeholder="作品标题" clearable></el-input>
      </el-form-item>
      <el-form-item label="发布人手机号">
        <el-input v-model="pamars.mobile" placeholder="发布人手机号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" row-key="Id" border style="width: 100%">
      <el-table-column prop="title" align="center" label="作品标题">
      </el-table-column>
      <el-table-column prop="ad_location_name" align="center" label="发布人">
        <template slot-scope="scope">
          <div>{{ scope.row.nickname }} / {{ scope.row.mobile }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="封面">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="click">
            <a :href="scope.row.cover" target="_blank" title="查看最大化图片"><img :src="scope.row.cover" style="width: 300px; height: 300px" /></a>
            <img slot="reference" :src="scope.row.cover" style="width: 50px; height: 50px; cursor: pointer" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="opus_theme_list" align="center" label="话题">
      </el-table-column>
      <el-table-column prop="browse_num" align="center" label="浏览" />
      <el-table-column prop="like_num" align="center" label="点赞" />
      <el-table-column prop="share_sum" align="center" label="分享" />

      <el-table-column prop="open_stick" align="center" label="是否置顶">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.open_stick" :active-value="true" :inactive-value="false" inactive-color="#B9B9B9" @change="switchRecommend(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="create_time" align="center" label="发布时间" />
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="goDatail(scope.row.id)">查看</el-button>
          <el-button type="text" size="small" v-if="scope.row.opus_status != 0" @click="Handle(scope.row, 1)">查看审核</el-button>
          <el-button type="text" size="small" v-if="scope.row.opus_status == 0" @click="Handle(scope.row, 0)" class="c-error">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pamars.page" :page-sizes="[10, 20, 50, 100]" :page-size="pamars.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <el-dialog title="文章详情" :visible.sync="dialogVisible" width="800px">
      <div v-if="opus">
        <h3>{{ opus.title }}</h3>
        <p>{{ opus.create_time }}</p>
        <p>{{ opus.content }}</p>
        <div v-if="opus.opus_type == 0">
          <div v-for="item in opus.images" :key="item">
            <img :src="item" alt="" style="width: 80%; margin-bottom: 20px" />
          </div>
        </div>
        <div v-if="opus.opus_type == 1">
          <video :src="opus.media_address" style="width: 80%" controls="controls" />
        </div>
        <div class="goods">
          <div class="item" v-for="item in opus.opus_goods_list" :key="item.id">
            <img :src="item.goods.cover" alt="" />
            <div>
              <p>{{ item.goods.title }}</p>
              <p>¥{{ item.goods.min_sale_price }}</p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="审核" :visible.sync="dialogVisible2" width="600px">
      <el-form :model="form">
        <el-form-item label="审核" v-model="form.opus_status">
          <el-radio v-model="form.opus_status" label="1" :disabled="isShow">通过</el-radio>
          <el-radio v-model="form.opus_status" label="2" :disabled="isShow">不通过</el-radio>
        </el-form-item>
        <template v-if="!isShow">
          <el-form-item label="理由" v-if="form.opus_status == 2">
            <el-select v-model="form.region" placeholder="请选择理由">
              <el-option :label="item" :value="index" v-for="(item, index) in reg" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="其他" v-if="form.region == 3 && form.opus_status == 2">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.textarea" maxlength="200">
            </el-input>
          </el-form-item>
        </template>
        <template v-if="isShow && form.opus_status == 2">
          <el-form-item label="理由">
            {{ form.audit_remark }}
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" v-if="!isShow" @click="submit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      pamars: {
        page: 1,
        limit: 10,
        title: '',
        mobile: ''
      },
      totalPage: 0,
      dataList: [],
      reg: ['图片内容不符合规范', '直播时间过长', '直播次数过多', '其他'],
      dataListLoading: false,

      dialogVisible: false,
      opus: null,
      dialogVisible2: false,
      form: {},
      isShow: false
    }
  },
  components: {},
  mounted () {
    this.getList()
  },
  methods: {
    // 是否推荐
    switchRecommend (row) {
      this.dataListLoading = true
      let data = {
        id: row.id,
        open_stick: row.open_stick
      }
      seviceApi.opusStick(data).then((res) => {
        this.dataListLoading = false
        if (res.data && res.data.code == 200) {
          this.$message.success('操作成功')
          this.getDataList()
        }
      })
    },
    submit () {
      let audit_remark = null
      if (this.form.region == 3) {
        audit_remark = this.form.textarea
      } else {
        audit_remark = this.reg[this.form.region]
      }

      if (this.form.opus_status == null || this.form.opus_status == 0) {
        this.$message.warning('请选择审核状态')
        return false
      }
      if (
        this.form.opus_status == 2 &&
        (audit_remark == null || audit_remark == undefined)
      ) {
        this.$message.warning('请填写审核不通过理由')
        return false
      }

      seviceApi
        .opusAudit({
          audit_remark: audit_remark,
          id: this.form.id,
          opus_status: this.form.opus_status
        })
        .then((res) => {
          if (res && res.data.code == 200) {
            this.$message.success('提交成功')
            this.dialogVisible2 = false
            this.getList()
            this.isShow = false
          } else {
            this.dialogVisible2 = false
            this.getList()
          }
        })
    },
    Handle (row, status) {
      seviceApi.opusInfo(row.id).then((res) => {
        if (res && res.data.code == 200 && res.data.opus != null) {
          this.form = res.data.opus
          if (status == 1) {
            this.form.opus_status = this.form.opus_status.toString()
            this.isShow = true
          } else {
            this.isShow = false
          }
          this.dialogVisible2 = true
        } else {
          this.getList()
          this.$message.error('该作品也被删除')
        }
      })
    },

    getList () {
      seviceApi.opusList(this.pamars).then((res) => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list

          this.totalPage = res.data.page.totalCount
        }
      })
    },

    // 每页数
    sizeChangeHandle (val) {
      this.pamars.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pamars.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.pamars.page = 1
      this.getList()
    },
    goDatail (id) {
      seviceApi.opusInfo(id).then((res) => {
        if (res && res.data.code == 200 && res.data.opus != null) {
          this.dialogVisible = true
          this.opus = res.data.opus
          this.opus.images = this.opus.images.split(',')
        } else {
          this.getList()
          this.$message.error('该商品已被删除')
        }
      })
    },

    // 广告上下线
    changeSwitch (e) {
      var param = {
        id: e.id,
        on_off: e.on_off
      }
      seviceApi.postOnOff(param).then((res) => {
        if (res && res.data.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getList()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.goods {
  display: flex;
  flex-wrap: wrap;
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 50%;
    img {
      width: 80px;
      height: 80px;
      margin-right: 20px;
    }
    div {
      // width: 100px;
    }
  }
}
</style>
